<template>
  <d2-container>
    <template slot="header">
      <el-form
        ref="queryForm"
        :model="queryForm"
        class="header-area"
        label-width="110px"
        style="height: auto"
      >
        <!-- 说明 -->
        <!-- 一行用一个row -->
        <!-- 每行由若干个col组成 -->
        <!-- 每行所有col的span值加起来，最大不超过24！ -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="调拨单编号" prop="orderNo">
              <el-input
                type="text"
                v-model="queryForm.orderNo"
                placeholder="请输入调拨单编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调入仓库" prop="repositoryNameIn">
              <el-input
                type="text"
                v-model="queryForm.repositoryNameIn"
                placeholder="请输入调入仓库"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调出仓库" prop="repositoryNameOut">
              <el-input
                type="text"
                v-model="queryForm.repositoryNameOut"
                placeholder="请输入调出仓库"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核状态" prop="auditStatus">
              <el-select v-model="queryForm.auditStatus" placeholder="请选择" style="width: 100%">
                <el-option label="全部" value=""></el-option>
                <el-option label="未提交" value="0"></el-option>
                <el-option label="待审核" value="1"></el-option>
                <el-option label="审核通过" value="2"></el-option>
                <el-option label="审核不通过 " value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="调拨状态" prop="allocationStatus">
              <el-select v-model="queryForm.allocationStatus" placeholder="请选择" style="width: 100%">
                <el-option label="全部" value=""></el-option>
                <el-option label="未处理" value="0"></el-option>
                <el-option label="已确定" value="1"></el-option>
                <el-option label="已撤销" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="调拨日期" prop="date">
              <el-date-picker
                v-model="date"
                type="daterange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <div class="search-submit">
              <el-button
                type="primary"
                size="medium"
                @click="submitForm('queryForm')"
                >查询</el-button>
              <el-button size="medium" @click="resetForm('queryForm')" >重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </template>
   <template>
			<div class="table-header">
				<el-button type="primary" @click="addAllocation">新增调拨单</el-button>
			</div>
      <el-table :data="tableData" stripe border style="width: 100%">
          <el-table-column type="index" fixed label="序号" width="50"></el-table-column>
          <el-table-column prop="orderNo" label="调拨单编号"></el-table-column>
          <el-table-column prop="applyReason" label="调拨原因"></el-table-column>
          <el-table-column
            prop="applyDate"
            label="调拨日期"
            :formatter="forDateApply" >
          </el-table-column>
          <el-table-column
            prop="repositoryNameOut"
            label="调出仓库" >
          </el-table-column>
          <el-table-column
            prop="repositoryNameIn"
            label="调入仓库" >
          </el-table-column>
          <el-table-column
            prop="auditor"
            label="审核人" >
          </el-table-column>
          <el-table-column
            prop="auditStatus"
            label="审核状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.auditStatus == 0">未提交</span>
              <span v-if="scope.row.auditStatus == 1">待审核</span>
              <span v-if="scope.row.auditStatus == 2">审核通过</span>
              <span v-if="scope.row.auditStatus == 3">审核不通过</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="allocationStatus"
            label="调拨状态" >
            <template slot-scope="scope">
              <span v-if="scope.row.allocationStatus == 0">未处理</span>
              <span v-if="scope.row.allocationStatus == 1">已确定</span>
              <span v-if="scope.row.allocationStatus == 2">已撤销</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间" :formatter="forDateCreate">
          </el-table-column>
          <el-table-column
            prop="auditTime"
            label="审核时间" :formatter="forDateAudit">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="280">
            <template slot-scope="scope">
              <el-button type="success" size="small" @click="openOrderDetail(scope.row)">查看</el-button>
              <el-button v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 3" type="warning" size="small" @click="openOrderUpdate(scope.row)">编辑</el-button>
              <el-button v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 3" type="danger" size="small" @click="deleteRow(scope.row)">删除</el-button>
              <el-button v-if="scope.row.auditStatus == 0 || scope.row.auditStatus == 3" type="primary" size="small" @click="openOrderDetail(scope.row)">提交</el-button>
              <el-button v-if="scope.row.auditStatus == 1" type="primary" size="small" @click="openOrderDetail(scope.row)">去审核</el-button>
              <el-button v-if="scope.row.auditStatus == 2 && scope.row.allocationStatus == 0" type="warning" size="small" @click="openOrderDetail(scope.row)">确定调拨</el-button>
              <el-button v-if="scope.row.auditStatus == 2 && scope.row.allocationStatus == 0" type="info" size="small" @click="openOrderDetail(scope.row)">确定撤销</el-button>
            </template>
          </el-table-column>
        </el-table>
    </template>
    <template slot="footer">
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>

<script>
import { getAllocationOrderPage, deleteAllocationOrder } from '@api/allocation/allocation'
import dayjs from 'dayjs'
export default {
  name: 'allocation-order-list',

  data () {
    return {
      date: [],
      queryForm: {
        orderNo: null,
        repositoryNameIn: null,
        repositoryNameOut: null,
        auditStatus: '',
        allocationStatus: '',
        dateBegin: null,
        dateEnd: null
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },

  mounted () {
    this.fetchData()
  },
  methods: {
    resetPage () {
      this.currentPage = 1
      this.pageSize = 10
      this.total = 0
    },
    submitForm (formName) {
      this.resetPage()
      this.fetchData()
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
      this.resetPage()
      this.fetchData()
      this.date = []
    },
    fetchData () {
      this.loading = true
      this.queryForm.dateBegin = this.date[0] == null ? '' : dayjs(this.date[0]).format('YYYY-MM-DD')
      this.queryForm.dateEnd = this.date[1] == null ? '' : dayjs(this.date[1]).format('YYYY-MM-DD')
      getAllocationOrderPage({
        orderNo: this.queryForm.orderNo,
        repositoryNameIn: this.queryForm.repositoryNameIn,
        repositoryNameOut: this.queryForm.repositoryNameOut,
        auditStatus: this.queryForm.auditStatus,
        allocationStatus: this.queryForm.allocationStatus,
        dateBegin: this.queryForm.dateBegin,
        dateEnd: this.queryForm.dateEnd,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(res => {
        this.tableData = res.data.content
        this.total = res.data.total
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    forDateApply (row, column) {
      return row.applyDate == null ? '' : dayjs(row.applyDate).format('YYYY-MM-DD')
    },
    forDateCreate (row, column) {
      return row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
    },
    forDateAudit (row, column) {
      return row.auditTime == null ? '' : dayjs(row.auditTime).format('YYYY-MM-DD HH:mm:ss')
    },
    addAllocation () {
      this.$router.push('/allocation/addAllocationOrder')
    },
    openOrderUpdate (row) {
      sessionStorage.setItem('allocationOrderIdUpdate', row.id)
      this.$router.push('/allocation/updateAllocationOrder')
    },
    openOrderDetail (row) {
      sessionStorage.setItem('allocationOrderIdDetail', row.id)
      this.$router.push('/allocation/allocationOrderDetail')
    },
    handleClose (done) {
      this.$confirm('确定关闭吗').then(() => {
        done()
      }).catch(() => {

      })
    },
	  // 删除
	  deleteRow (row) {
	    this.$confirm('确认删除' + row.orderNo + '？').then(_ => {
        this.loading = true
        deleteAllocationOrder({
          allocationOrderId: row.id
        })
          .then(res => {
            if (res.code == '000000') {
              this.$message({ message: res.message, type: 'success' })
              this.fetchData()
              this.loading = false
            } else {
              this.$message({ message: res.message, type: 'error' })
            }
          })
          .catch(err => {
            console.log('err', err)
            this.loading = false
          })
      })
	  }
  }
}
</script>
